<template>
    <div class="analysis-item">
        <a-row :gutter="24">
            <a-col :span="12">
                <div class="title-cnt">
                    <div class="title">发起流程数（不包含退回）</div>
                    <div class="sub-title">
                      <div><span style="font-size: 30px;margin-right: 8px">{{  statistics.subCompanyCount  }}</span>个子公司</div>
                      <div><span style="font-size: 30px;margin-right: 8px">{{  statistics.userCount  }}</span>个人员</div>
                    </div>
                </div>
                <div class="content">
                  <div class="content-cnt">
                    <div>部门 TOP3</div>
                    <div class="content-row" v-for="item in statistics.departProcessTop" :key="item.departId" @click="handleAnalysis('depart')">
                      <span>{{  item.departName  }}</span>
                      <span>{{  item.startCount  }}</span>
                    </div>
                  </div>
                  <div class="content-cnt">
                    <div>人员 TOP3</div>
                    <div class="content-row" v-for="item in statistics.userProcessTop" :key="item.userName" @click="handleAnalysis('user')">
                      <span>{{  item.userName  }}</span>
                      <span>{{  item.num  }}</span>
                    </div>
                  </div>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { getAction } from '@/api/manage';
import moment from 'dayjs'

export default {
  data(){
    return {
        statistics: {
          departProcessTop: [],
          subCompanyCount: 0,
          userCount: 0,
          userProcessTop: []
        }
      }
  },
  props: {
      time: {
        type: Array,
        default: () => []
      }
    },
    watch: {
        time: {
            handler() {
                this.init()
            },
        }
    },
    mounted() {
        this.init()
    },
    methods: {
      init() {
          let startTime = `${moment(this.time[0]).format('YYYY-MM')}-01`
          let endTime = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
          getAction('/api/erpmng/sys/board/processDeptAndUserRank', { startTime, endTime }).then(res => {
              if(res.success){
                const { departProcessTop,subCompanyCount,userCount,userProcessTop } = res.result
                this.statistics.subCompanyCount = subCompanyCount || 0
                this.statistics.userCount = userCount || 0
                this.statistics.departProcessTop = departProcessTop || []
                this.statistics.userProcessTop = userProcessTop || []
              }
          })
      },
      handleAnalysis(type){
        this.$emit('data',type)
      }
    },
}
</script>

<style lang="less" scoped>
.analysis-item {
    padding: 10px;
    box-shadow: 1px 1px #f2f3f5;
    background-color: #fff;

    .title-cnt {
        background-image: linear-gradient(to right, #07acef, #2cbaf4);
        padding: 5px 10px 10px 10px;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        margin-top: 10px;

        .sub-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
    }

    .content {
        border: 1px solid #f2f3f5;
        border-top: none;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        height: 125px;

        .content-cnt{
          width: 32%;
          line-height: 26px;

          .content-row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
          }
        }
    }


}
</style>